<template>
  <el-card>
    <!-- 主页权限列表 -->
    <el-row type="flex" justify="end" class="title">
      <el-button type="primary" @click="addFn">添加权限</el-button>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        align="center"
        prop="title"
        label="权限名称"
      />
      <el-table-column
        align="center"
        prop="code"
        label="权限标识"
      />
      <el-table-column
        align="center"
        prop="description"
        label="权限描述"
      />

      <el-table-column v-slot="{row}" label="操作" align="right" header-align="center">
        <el-button v-if="row.type== 1" size="small" type="primary" @click="addSun(row.id,'2')">添加子权限</el-button>
        <el-button size="small" @click="editFn(row.id)">编辑</el-button>
        <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
      </el-table-column>
    </el-table>

    <!-- 新增弹框 -->
    <el-dialog title="添加权限" :visible.sync="showDialog" @close="closeFn">
      <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="formData.description" type="textarea" />
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button size="small" @click="closeFn">取消</el-button>
          <el-button v-if="add1" size="small" type="primary" @click="submitFn('0','1')">{{ config }}</el-button>
          <el-button v-else size="small" type="primary" @click="addchildPermission">添加2</el-button>

        </el-row>
      </el-form>
    </el-dialog>
  </el-card>

</template>

<script>
import { getPermissionlist, addPermission,
  delPermission, getPermission, editPermission } from '@/api/permissions'
export default {
  data() {
    return {
      add1: true,
      config: '添加',
      pdata: {
        _limit: 20,
        _start: 0
      },
      tableData: [],
      showDialog: false,
      formData: {
        title: '',
        code: '',
        description: '',
        pid: '',
        type: ''// 值为1表示一级权限，值为2表示2级权限
      },
      rules: {
        title: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度请保持在3-8个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' },
          { min: 3, max: 8, message: '长度请保持在3-8个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入权限描述', trigger: 'blur' },
          { min: 3, max: 8, message: '长度请保持在3-8个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getPermissionlist(this.pdata)
      // console.log(52, res.data)
      this.tableData = this.treeTolist(res.data, '0')
      // console.log(118, this.tableData)
    },
    treeTolist(data, pid) {
      const arr = []
      data.forEach(value => {
        if (+value.pid === +pid) {
          arr.push(value)

          value.children = this.treeTolist(data, value.id)
        }
      })
      return arr
    },
    // 点击添加权限
    addFn() {
      this.add1 = true
      this.showDialog = true
    },
    // 添加/编辑按钮
    async submitFn(pid, type) {
      if (this.formData.id) {
        // 进行编辑更改
        await editPermission(this.formData)
        this.closeFn()
        this.initData()
      } else {
        // 添加一级权限
        await this.$refs.form.validate()
        this.formData.pid = pid
        this.formData.type = type
        await addPermission(this.formData)
        this.closeFn()
        this.initData()
      }
    },

    // 添加二级权限
    async addSun(pid, type) {
      this.add1 = false
      this.showDialog = true
      this.formData.pid = pid.toString()
      this.formData.type = type
    },

    // 关闭弹窗
    closeFn() {
      this.showDialog = false
      // 清空校验
      this.$refs.form.resetFields()
      // 清空表单
      this.formData = {
        title: '',
        code: '',
        description: '',
        pid: '',
        type: ''
      }
    },
    // 删除权限
    async delFn(id) {
      await this.$confirm('是否删除此权限？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delPermission(id)
        console.log(res)
        this.initData()
      })
    },
    async addchildPermission() {
      await this.$refs.form.validate()
      // console.log(pid, type)
      console.log(168, this.formData)
      await addPermission(this.formData)
      this.closeFn()
      this.initData()
    },
    // 数据回显
    async editFn(id) {
      this.add1 = true
      this.config = '更改'
      const msg = await getPermission(id)
      this.formData = msg.data
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  margin-bottom: 15px;
}
</style>
